<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/common_css :: commonHeader('编辑专家')">
</head>
<link rel="stylesheet" th:href="@{/js/admin.ui/lib/zTree/v3/css/metroStyle/metroStyle.css}" type="text/css">
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-expert-edit">
        <input type="hidden" id="id" name="id" th:value="${e.id }" />
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="名称（必填）" th:value="${e.name }" id="name" name="name" maxlength="50" />
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>类别：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select id="typeId" name = "typeId" class="input-text"  >
                    <th:block th:each="item:${et}">
                        <option th:value="${item.id}" th:text="${item.name}"></option>
                    </th:block>
                </select>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>绑定用户：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <select id="userId" name = "userId" class="input-text"  >
                    <th:block th:each="item:${tu}">
                        <option th:value="${item.userId}" th:text="${item.userName}"></option>
                    </th:block>
                </select>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>年龄：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="年龄（必填）" th:value="${e.age }" id="age" name="age" maxlength="50" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>职位：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="职位（必填）" th:value="${e.position }" id="position" name="position" maxlength="50" />
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">介绍：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="introduction" id="introduction" maxlength="150" class="textarea"  placeholder="介绍...150个字符以内" onKeyUp="javascript:textareaLength(this);"><th:block th:text="${e.introduction }"></th:block></textarea>
                <p class="textarea-numberbar"><em class="textarea-length"><span id="textareaLengthSpan">0</span></em>/150</p>
            </div>
        </div>

        <div class="row cl">
            <div style="text-align: center;">
                <button class="btn btn-primary radius" type="button" onclick="edit();">
                    <i class="Hui-iconfont">&#xe632;</i> 保存
                </button>
                &nbsp;&nbsp;
                <button onClick="layer_close();" class="btn btn-default radius" type="button">
                    &nbsp;&nbsp;取消&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </form>
</article>
<div th:include="admin/common/common_js :: onLoadJS"></div>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js}"></script>
<script type="text/javascript" th:inline="javascript">

    $("#typeId").val([[${e.expertType}]]);
    $("#userId").val([[${e.userId}]]);


    function edit() {
        var name = $("#name").val();
        var age = $("#age").val();
        var position = $("#position").val();
        var introduction = $("#introduction").val();
        var typeId = $("#typeId").val();
        var userId = $("#userId").val();
        var typeName = $("#typeId").find("option:selected").text();
        if(name == ''){
            layer.msg('请输入名称', {icon: 2});
            return false;
        }else if(age == ""){
            layer.msg('请输入年龄', {icon: 2});
            return false;
        }else if(position == ""){
            layer.msg('请输入职位', {icon: 2});
            return false;
        }else if(introduction == ""){
            layer.msg('请输入介绍', {icon: 2});
            return false;
        }
        var formData = new FormData();
        formData.append("id", $("#id").val());
        formData.append("name", name);
        formData.append("age", age);
        formData.append("position", position);
        formData.append("introduction", introduction);
        formData.append("typeId", typeId);
        formData.append("typeName", typeName);
        formData.append("userId", userId);
        send2(
            "/pestdiagnosis/sys/pest/editExpert",
            formData,
            function (data) {
                layer.msg(data.message, {icon: 1,time: 1500}, function() {
                    window.parent.location.href = "/pestdiagnosis/sys/pest/toListExpert";
                });
            },
            function (res) {
                layer.msg('网络异常，请稍后再试', {icon: 2});
            }
        );
    }
    // 计算文本域字符长度
    function textareaLength(obj) {
        $('#textareaLengthSpan').text($(obj).val().length);
    }
</script>
</body>
</html>